<template>
  <div class="index">
      <div class="index-layout">
          <div class="box user-box">
              <div class="box-left">
                  <div class="title">设计师</div>
                  <div class="count">{{ tabData.designerCount }}</div>
                  <div class="description">当前设计师总数</div>
              </div>
              <div class="box-right">实时</div>
          </div>
          <div class="box goods-box">
              <div class="box-left">
                  <div class="title">设计方案</div>
                  <div class="count">{{ tabData.schemeCount }}</div>
                  <div class="description">当前设计方案总数</div>
              </div>
              <div class="box-right">实时</div>
          </div>
          <div class="box order-box">
              <div class="box-left">
                  <div class="title">游客</div>
                  <div class="count">{{ tabData.userCount }}</div>
                  <div class="description">当前游客总数</div>
              </div>
              <div class="box-right">实时</div>
          </div>
      </div>
      <div class="eChart">
          <div class="box">
              <userLineChart></userLineChart>
          </div>
          <div class="box">
              <LineChart></LineChart>
          </div>
      </div> 
  </div>
</template>
<script setup>
import { getIndexDataList } from '@/api/index'
import LineChart from './dashboard/orderLineChart.vue'
import userLineChart from './dashboard/userLineChart.vue'
let tabData = ref({})
const getListTab = () => {
  getIndexDataList().then((res) => {
      tabData.value = res
  })
}
getListTab()
</script>
<style lang="scss" scoped>
.user-dialog {
  ::v-deep(.el-table th.el-table__cell:nth-child(1) .cell) {
      visibility: hidden;
  }
}

.eChart {
  width: 98%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 1200px;
  margin: 30px 0;

  .box {
      width: 48%;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      border-radius: 20px;
  }
}

.index {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 30px 0;

  .index-layout {
      width: 98%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .user-box {
          background-color: #3594f3;
      }

      .goods-box {
          background-color: #af8ae1;
      }

      .order-box {
          background-color: #83c9ca;
      }

      .box {
          min-width: 400px;
          width: 30%;

          margin: 0 10px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          padding: 20px;
          border-radius: 15px;

          .box-left {
              width: 60%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-around;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #fff;

              .title {
                  width: 100%;
                  font-size: 22px;
                  font-weight: 500;
              }

              .count {
                  width: 100%;
                  font-size: 30px;
                  margin: 20px;
                  font-weight: 700;
              }

              .description {
                  width: 100%;
                  font-size: 18px;
              }
          }

          .box-right {
              background-color: #FFFFFF;
              font-size: 14px;
              color: #0b6887;
              padding: 4px 8px;
              border-radius: 6px;
              font-weight: 600;
          }
      }
  }
}

.accept {
  width: 98%;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  margin-left: 30px;

}
</style>

